<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    单页面的功能：
    1. 知道点击的是哪个 hash 值
    2. 实现历史管理（用户点击浏览器的前进后退后我们
    要给用户做对应的页面功能）
</p>
<ul>
    <li><a href="#/home">首页</a></li>
    <li><a href="#/news">新闻</a></li>
    <li><a href="#/about">关于</a></li>
</ul>
<hr>
<div id="cnt">

</div>
</body>
<script type="text/javascript">

    /*
    *
     * onhashchange 可以监视到页面的 hash 值的变化，一旦 hash 变化了
     * 回调函数就会执行
      * */
    window.onhashchange = function () {
        /*
        * 得知用户点击的 hash 值
        * */
        let hash = location.hash;
        console.log(hash);
        let cnt = document.getElementById('cnt');

        if (hash == '#/home') {

            cnt.innerText = '首页功能';

        } else if (hash == '#/news') {

            cnt.innerText = '新闻列表';

        } else if (hash == '#/about') {

            cnt.innerText = '关于我们';

        }else{

            cnt.innerText = '其他内容';

        }

    }


</script>

</html>
